<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件 slot 分发</title>
</head>
<body>
<div id="app">
    <child-component>
        <div>hello world</div>
        <div slot="person">twang</div> 
    </child-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('child-component', {
        props: [],
        template: '\
            <div>\
                <slot name="person"></slot>\
                <slot name="money">I have no Money!</slot>\
                <slot></slot>\
            </div>',
        data: function () {
            return {
            }
        },

        methods: {
            handleIncrease: function() {
                this.counter++;                    
                this.$emit('increase', this.counter);
            },

            handleReduce: function() {
                this.counter--;
                this.$emit('reduce', this.counter);
            }
        }
    });

    var app = new Vue({
        el: '#app',
        data: {
            total: 0,
            hello: 'hello world!'
        },
        computed: {
        },
        watch: {         
        },
        methods: {
            handleGetTotal: function(total) {
                this.total = total;
            }
        },
        //组件创建之前
        beforeCreate(){
            console.warn('beforeCreate');
        },
        //组件创建完毕
        created(){
            console.warn('created');
        },
        // 组件挂载之前
        beforeMount(){
            console.warn('beforeMount');
        },
        // 组件挂载完毕
        mounted(){
            console.warn('mounted');
        },
        // 组件更新之前
        beforeUpdate(){
            console.warn('beforeUpdate');
        },
        // 组件更新完毕
        updated(){
            console.warn('updated');
        },
        // 组件销毁之前
        beforeDestroy(){
            console.warn('beforeDestroy');
        },
        // 组件销毁完毕
        destroyed(){
            console.warn('destroyed');
        }
    })
</script>
</body>
</html>